<template>
  <div class="map">
    <iframe src="/template/web/default/article/map.html" frameborder="0"></iframe>
  </div>
  <!--面包屑 -->
  <el-breadcrumb separator="/" style="padding: 20px">
    <el-breadcrumb-item :to="{ path: '/' }">{{ $store.state.isChinese ? '首页' : 'главная' }}</el-breadcrumb-item>
    <el-breadcrumb-item>{{ $store.state.isChinese ? '联系我们' : 'контакты' }}</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="infogz">
    <h3 class="line-height-4">{{ $store.state.isChinese ? '风速达(广州)风速达货运代理有限公司（广州总部）' : 'FengSuDa-компания(Гуанчжоу)' }}</h3>
    <div class="info">
      <p class="info-item">
        <strong>{{ $store.state.isChinese ? '联系人：' : 'Contact：' }}</strong>
        <span>{{ $store.state.isChinese ? '陈先生' : 'Mr. Chen' }}</span>
      </p>
      <p class="info-item">
        <strong>{{ $store.state.isChinese ? '电话：' : 'Phone：' }}</strong>
        <span>13600008684</span>
      </p>
      <p class="info-item">
        <strong>{{ $store.state.isChinese ? '手机:' : 'Tel:' }}</strong>
        <span>13600008684</span>
      </p>
      <p class="info-item">
        <strong>{{ $store.state.isChinese ? '邮箱:' : 'Email:' }}</strong>
        <span>blackjack2831@126.com</span>
      </p>
      <p class="info-item">
        <strong>{{ $store.state.isChinese ? '总部:' : 'Address:' }}</strong>
        <span>{{ $store.state.isChinese ? '广州市白云区松洲街高桥路三街25号103室' : 'Room 103, No. 25, Third Street, Gaoqiao Road, Songzhou Street, Baiyun District, Guangzhou City' }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {};
</script>
<style>
.map {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  background: url("../assets/img/map.png") no-repeat center;
  background-size: cover;
}

.infogz {
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.infogz .info {
  margin-top: 10px;
}

.infogz .line-height-4 {
  font-size: 22px;
  width: 100%;
  line-height: 1.5;
  text-align: left;
}

.info-item {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 0;
  margin-bottom: 1rem;
  color: rgb(33, 37, 41);
  white-space: normal;
  background-color: rgb(255, 255, 255);
  font-size: 12px;
}

.info-item strong {
  min-width: 70px; /* 设置最小宽度 */
  text-align: left; /* 左对齐 */
}

.info-item span {
  margin-left: 5px; /* 设置间隔 */
}
</style>
